<template>
    <view class="vip-center-wrapper">
        <gwCardTabs
                @tabChange="tabChange"
                :tabsTitle="pos.noTable?tabsTitle2:tabsTitle"
                width="610rpx"
                :typeVal="type"
                padding="20rpx 70rpx"
                class="tab-wrapper">
                
        </gwCardTabs>
        <view class="tab-wrapper">
            <view class="tap-content">
                <mescroll-uni
                        top="20"
                        @down="downCallback"
                        @up="upCallback"
                        :down="downOption"
                        :up="upOption"
                        class="mescroll-flex"
                        :fixed="false"
                        @init="mescrollInit"
                >
                    <view v-if="type===1" v-for="(item, index) in userCards" :key="index" class="vip-card">
                        <vip-card :item="item" :btnText="pos.noTable?'退押金':'查看详情'" :type="1" @watchDetail="watchDetail"/>
                    </view>
                    <view v-if="type===2">
                        <active-card
                                v-for="(item, index) in userCards" :key="index"
                                :item="item"
                                @updateData="updateData"
                        />
                    </view>
                    <view v-if="type===3" v-for="(item, index) in userCards" :key="index" class="vip-card">
                        <vip-card :item="item" :btnText="pos.noTable?'退押金':'查看详情'" :type="3" @watchDetail="watchDetail"/>
                    </view>
                    <view v-if="type===4" v-for="(item, index) in userCards" :key="index" class="vip-card">
                        <vip-card :item="item" :btnText="pos.noTable?'退押金':'查看详情'" :type="1" @watchDetail="watchDetail"/>
                    </view>
                    <view v-if="type===5" v-for="(item, index) in userCards" :key="index" class="vip-card">
                        <vip-card :item="item" :btnText="'押金已退'" :type="3" @watchDetail="watchDetail"/>
                    </view>
                </mescroll-uni>
            </view>
        </view>
        
        <view class="fix common-save-btn" v-if="!pos.noTable">
            <text class="common-txt" @tap="chooseCard" v-if="!hidePart">继续购卡</text>
        </view>
    </view>
</template>

<script>
    import activeCard from './active-card';
    import gwCardTabs from '../../pages/components/gw-card-tabs';
    import vipCard from './vip-card';
    import { mapGetters } from 'vuex';
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import service from "@/service";
    import { returntime } from '@/util/utils';
    export default {
        name: "card",
        components: {
            gwCardTabs, vipCard, activeCard, MescrollUni
        },
        computed: {
            ...mapGetters(['hidePart'])
        },
        filters: {
            returntime
        },
        data(){
            return{
                tabsTitle: [
                    {
                        type: 1,
                        name: '已生效'
                    },
                    {
                        type: 2,
                        name: '待生效'
                    },
                    {
                        type: 3,
                        name: '已失效'
                    },
                ],
                tabsTitle2: [
                    {
                        type: 4,
                        name: '可退'
                    },
                    {
                        type: 5,
                        name: '已退'
                    }
                ],
                userCards: [],
                type: 2,
                page: 1,
                limit: 10,
                vipCard: [
                    {
                        isChecked: false,
                        type: 'subCard'
                    },
                    {
                        isChecked: false,
                        type: 'timeCard'
                    }
                ],
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    offset: 130,
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null,
                pos: {}
            }
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            downCallback(mescroll){
                this.userCards = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getMcards();
            },
            updateData(){
                this.type = 1;
                this.page = 1;
                this.getMcards();
            },
            tabChange(item){
                this.type = item.type;
                this.userCards = [];
                this.page = 1;
                this.mescroll.resetUpScroll();
            },
            watchDetail(vipCardMemberLogId,item){
                let that = this
                if(this.type == 4){
                    let obj = {
                        1: '您的次卡尚未用完，确认要退押金么',
                        2: '您的时长卡尚未到期，确认要退押金么'
                    }
                    let str = '您确认要退押金么'
                    if(item.vipCardMemberLogType == 1){
                        let num = item.vipCardMemberLogBorrowFrequency - item.vipCardMemberLogBorrowFrequencyTrue
                        if(num > 0){
                            str = obj[item.vipCardMemberLogType*1]
                        }
                    }else if(item.vipCardMemberLogType == 2){
                        let date = item.vipCardMemberLogEndTime - new Date().getTime()/1000
                        if(date > 0){
                            str = obj[item.vipCardMemberLogType*1]
                        }
                    }
                    uni.showModal({
                        title: '提示',
                        content: `${str}`,
                        success: function (res) {
                            if (res.confirm) {
                                service.mineService.deposit({
                                    data: {
                                        vipCardMemberLogId: item.vipCardMemberLogId
                                    },
                                    success: res => {
                                        uni.hideLoading();
                                        uni.showModal({
                                            title: '提示',
                                            content: `${res.result.msg}`,
                                            showCancel: false,
                                            success: function (res) {
                                                if (res.confirm) {
                                                    that.getMcards()
                                                } 
                                            }
                                        });
                                    },
                                    fail: ()=>{
                                        
                                    },
                                    complete: () => {
                                        
                                    },
                                });
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                    return
                }
                if(this.type == 5){
                    return
                }
                uni.navigateTo({
                    url: `./vip-card-detail?vipCardMemberLogId=${vipCardMemberLogId}`
                })
            },
            chooseCard(){
                uni.navigateTo({
                    url: './index'
                })
            },
            getMcards(){
                uni.showLoading({
                    title: '加载中',
                });
                service.mineService.getMcards({
                    data: {
                        status: this.type,
                        page: this.page,
                        limit: this.limit
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.userCards.push(...data) : this.userCards = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
        },
        onLoad(params){
            this.pos = params;
            let {type} = params;
            this.type = Number(type) || 1;
            this.userCards = [];
            this.page = 1;
            this.mescroll.resetUpScroll();
        }
    }
</script>

<style scoped lang="scss">
    .vip-center-wrapper{
        .tap-content{
            // width: 690rpx;
            // margin-left: -40rpx;
            // margin-top: 40rpx;
            margin: 40rpx 40rpx 0;
            height: calc(100% - 80rpx);
        }
        .vip-card{
            margin-bottom: 40rpx;
        }
    }
</style>